<template>

  <el-card class=" mt15">
    <div slot="header" class=" h4">
      收支明细图
    </div>
    <div class="flex flex-between">
      <div class="flex ">
        <span class="mr10">时间筛选:   </span>
        <el-date-picker
          class="mr10"
          v-model="time"
          size="mini"
          type="daterange"
          unlink-panels
          @change="timeChange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <el-button :type="index===1?'primary':''" @click="quickSearch(1)" size="mini">近十五天</el-button>
        <el-button :type="index===2?'primary':''" @click="quickSearch(2)" size="mini">近七天</el-button>
      </div>
      <div class="flex flex-between">
        <span class="mr10">查看值:</span>
        <el-select
          v-model="check_value"
          filterable
          placeholder="请选择"
          size="mini">
          <el-option
            v-for="item in viewValue"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </div>
    </div>
    <bar-chart
      :datas="datas"
      :options="originOption"
      height="500px"
    />
  </el-card>
</template>

<script>
  import barChart from '@/views/components/chart'
  import {halfMonthAgo,sevenDaysAgo} from '@/utils'

  export default {
    name: 'CompanyChart',
    components: {barChart},
    props:{
      viewValue:{
        type:Array,
        default:()=>{return[]}
      },
      mp_type:{
        type:Number,
        default: 0
      }
    },
    data() {
      // const startDate = new Date(new Date().getTime() - 31 * 24 * 3600 * 1000)
      // const endDate = new Date()
      // const startTime = startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate()
      // const endTime = endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate()
      // const time = [startTime, endTime]

      var colors = ['#5793f3', '#d14a61', '#675bba']
      return {
        time: sevenDaysAgo(),
        check_value: '',
        type: 0,
        performance: 0,
        originOption: {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              },
            }
          },
          grid: {
            x: 200
          },
          legend:{
            data:[ '收益','消耗'],
            selected:{
              '消耗':false,
              '收益':true
            }
          },
          label: {
            show: true,
            position: 'top'
          },
          xAxis: [{
            type: 'category',
            data: [ '收益','消耗']
          }],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              name: '收益'
            },
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: colors[1]
                }
              },
              name: '消耗'
            },
          ],
          series: [
            {
              name: '收益',
              type: 'bar',
              yAxisIndex: 0,
              barWidth: '20%',
            },
            {
              name: '消耗',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '20%',
            },
          ]
        },
        option: {},
        index: 2    //1为近三十日, 2为近七日
      }
    },
    computed: {
      filter_infos(val) {
        let check_value = ''
        let owner_corp = ''
        switch (this.check_value) {
          case '微赞':
            check_value = ''
            owner_corp = '微赞'
            break
          case '乾丰':
            check_value = ''
            owner_corp = '乾丰'
            break
          default:
            check_value = this.check_value
            owner_corp = ''
        }
        const obj = {}
        obj.check_value = check_value
        obj.owner_corp = owner_corp
        obj.begin_date = this.time&&this.time[0]
        obj.end_date = this.time&&this.time[1]
        obj.check_type = 0
        obj.mp_type = this.mp_type
        return obj
      },
      datas() {
        return this.option
      }
    },
    watch: {
      filter_infos(val) {
        this.getTableList()
      }
    },
    mounted() {
      this.getTableList()
    },
    methods: {
      timeChange() {
        this.index = 0
      },
      quickSearch(index) {
        if (this.index !== index) {
          this.index = index
        } else {
          this.index = 0;
        }
        this.type = 0
        if (index === 1) {
          this.time = halfMonthAgo()
        }else{
          this.time = sevenDaysAgo()
        }
      },
      getTableList() {
        const data = {
          ...this.filter_infos
        }
        this.$get('action/TaoMpInfo/dataform', data)
          .then(res => {
            const data = res.data.sort((a,b)=>{
              return new Date(a.date).getTime() - new Date(b.date).getTime()
            })
            const income = []
            const cost = []
            const xAxis = []

            data.forEach((item, index) => {
              income[index] = item['income']||0
              xAxis[index] = item.date
              cost[index] = item['cost']||0
            })
            this.option = {
              xAxis: [{
                type: 'category',
                data: xAxis
              }],
              series: [
                {
                  name: '收益',
                  data: income,
                },
                {
                  name: '消耗',
                  data: cost,
                },
              ]
            }
          })
      }
    }
  }
</script>
